<template>
	<view class="cont">
		<view class="tj">
		    <view>可提现总金额</view>
		    <view>{{all_price}}元</view>
		  </view>
		  <view class="tjan">
			<view @click="tixianList">提现明细</view>
		    <view @click="tixian" v-if="all_price > 0">申请提现</view>
		  </view>
		<view class="list">
		    <view class="list_item list_title">
		      <view>变动前</view>
		      <view>变动金额</view>
		      <view>变动后</view>
		      <view>变动时间</view>
		    </view>
		      <view class="list_item" v-for="(itme,index) in lists" v-if="lists.length > 0">
		        <view>{{itme.before}}</view>
		        <view>{{itme.change}}</view>
				<view>{{itme.after}}</view>
		        <view>{{itme.update_time}}</view>
		      </view>
			  <view class="" style="text-align: center;padding: 20px 0;color: #333;font-size: 14px;" v-else>暂无数据</view>
		  </view>
		<view class="tixian" v-if="isje">
			<view class="txcont">
				<view class="txconttext">选择提现金额</view>
				<view class="txul">
					<view :class="['txulli',jeindex == index ? 'onxlcolor' :''] "  v-for="(itme,index) in jelist" @click="ontab(index)">{{itme}}元</view>
					<!-- <view class="txulli">20元</view>
					<view class="txulli">50元</view>
					<view class="txulli">50元</view> -->
				</view>
				<view class="tibus">
					<view class="tishenq" @click="isje = false">关闭</view>
					<view class="tishenq" @click="sqtx">申请提现</view>
					
				</view>
				
			</view>
		</view>
		<view class="tixian" v-if="isjelist">
			<view class="txcont" style="padding: 0;">
				<view class="txconttext" style="padding: 30rpx 0;">提现明细</view>
				<view class="list" style="height: 50vh;overflow: scroll;">
				    <view class="list_item list_title">
				      <view>提现金额</view>
				      <view>申请时间</view>
					  <view>审核状态</view>
				      <view>到账时间</view>
				    </view>
				      <view class="list_item" v-for="(itme,index) in txlist" >
				        <view>{{itme.withdraw_price}}</view>
				        <view>{{itme.created_at}}</view>
						<view>
							<!-- <u-button text="领取红包" size="small" @click="lingqu()"></u-button> -->
							<block v-if="itme.is_status == 1">待审核</block>
							<block v-if="itme.is_status == 2">
								<text v-if="itme.use_status ==3 ">已领取</text>
								<u-button v-else text="领取红包" size="mini" color="#f9314b" @click="lingqu(itme.id)"></u-button>
							</block>
							<block v-if="itme.is_status == 3">审核不通过</block>
						</view>
				        <view>
							<block v-if="itme.use_time">{{itme.use_time}}</block>
						</view>
				      </view>
				  </view>
				<view class="tibus" style="justify-content: center;">
					<view class="tishenq" style="height: 60rpx;line-height: 60rpx;" @click="isjelist = false">关闭</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import{getAgentData,applyWithDraw,priceList,getWithDrawData} from '@/api/index.js'
	export default {
		data() {
			return {
				lists:[],
				jelist:[],
				txlist:[],
				isje:false,
				isjelist:false,
				jeindex:-1,
				all_price:0
			};
		},
		onLoad(option){
			this.getAgentData()
			this.getpriceList()
		},
		methods:{
			//领取红包
			lingqu(e){
				console.log(e)
				uni.navigateTo({
					url: '/package/agent/H5?id=' + e
				});
			},
			//点击提现明细
			tixianList(){
				
				this.getWithDrawData()
			},
			//
			//获取金额列表
			getWithDrawData(){
				getWithDrawData({}).then(res => {
					console.log(res)
					this.isjelist=true;
					this.txlist = res.result;
					// this.all_price = res.result.all_price;
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: "none"
					})
				})
			},
			
			//点击弹窗的申请提现
			sqtx(){
				if(this.jeindex == -1){
					uni.showToast({
						title: '请选择提现金额',
						icon: "none"
					})
					return false;
				}
				
				this.getapplyWithDraw(this.jelist[this.jeindex])
			},
			//点击金额的切换
			ontab(e){
				this.jeindex = e;
			},
			//获取金额列表
			getpriceList(){
				priceList({}).then(res => {
					console.log(res)
					this.jelist = res.result;
					// this.all_price = res.result.all_price;
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: "none"
					})
				})
			},
			//获取浏览数据
			getAgentData(){
				getAgentData({}).then(res => {
					console.log(res)
					this.lists = res.result.list;
					this.all_price = res.result.all_price;
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: "none"
					})
				})
			},
			//点击申请提现
			tixian(){
				let _this = this;
				this.isje = true;
				// uni.showModal({
				// 	title: '温馨提示',
				// 	content: '是否申请提现',
				// 	cancelText:'否',
				// 	confirmText:'是',
				// 	success: function (e) {
				// 		if (e.confirm) {
				// 			_this.getapplyWithDraw()
				// 		} else if (e.cancel) {
							
				// 		}
				// 	}
				// });
			},
			//申请提现接口
			getapplyWithDraw(e){
				let _this = this;
				applyWithDraw({bank_price:e}).then(res => {
					console.log(res)
					uni.showModal({
						title: '温馨提示',
						content: res.msg,
						showCancel:false,
						success: function (e) {
							if (e.confirm) {
								_this.isje = false;
								_this.getAgentData()
							} 
						}
					});
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: "none"
					})
				})
			}
			
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
		.tixian{
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;
			background: #00000087;
			z-index: 11;
			.txcont{
				width: 80%;
				min-height: 100rpx;
				background: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 12;
				.txconttext{
					width: 100%;
					text-align: center;
					color: #333;
					font-weight: 600;
					font-size: 36rpx;
					line-height: 60rpx;
				}
				.txul{
					display: flex;
					flex-wrap: wrap;
					.txulli{
						width: 30%;
						height: 60rpx;
						margin: 0 1.3%;
						margin-top: 20rpx;
						border: 1px solid #ccc;
						text-align: center;
						line-height: 60rpx;
						border-radius: 10rpx;
					}
					.onxlcolor{
						background: #0089ff;
						border: 1px solid #0089ff;
						color: #fff;
					}
					
				}
				.tibus{
					display: flex;
					    justify-content: space-between;
						margin: 30rpx 0;
						.tishenq{
							width: 40%;
							height: 80rpx;
							line-height: 80rpx;
							text-align: center;
							background: #f9314b;
							color: #fff;
							font-size: 28rpx;
							border-radius: 20rpx;
							
						}
				}
				
				
			}
		}
		.tj{
		   display: flex;
		   justify-content: space-between;
		   padding: 24rpx 16rpx;
		   font-size: 26rpx;
		   font-weight: 700;
		 }
		 .tjan{
		  display: flex;
		  justify-content: flex-end;
		  padding-bottom: 10rpx;
		  /* font-size: 26rpx; */
		  font-weight: 700;
		  view{
		    width: 150rpx;
		    height: 50rpx;
		    line-height: 50rpx;
		    text-align: center;
		    margin: 0 10rpx;
		    border-radius: 10rpx;
		    overflow: hidden;
		    font-size: 24rpx;
		    color: #fff;
			background-image: linear-gradient(to right,#ff6d80,#ff2a2a);
		  }
		  view:nth-child(1){
			  background-image: linear-gradient(to right,#6db0ff,#0d62ff);
		  }
		}
		.list{
		  margin: 0 auto;
		  .list_item{
		    width: 100%;
		    display: flex;
		    padding: 24rpx 0;
		    justify-content: space-around;
		    font-size: 26rpx;
			 background-color: #fff;
			 border-bottom: 1px solid #ececec;
			view{
			  width: 25%;
			  text-align: center;
			  box-sizing: border-box;
			  padding: 0 6px;
			  word-wrap:break-word
			}
			
		  }
		  .list_title{
		   background-color: #ffdbd8;
		  }
		}
	}
	
</style>
